import React, { useEffect, useRef } from "react";
import * as echarts from 'echarts';
import styels from "./echart.module.scss";

const EchartModel = ({
    state = [
        { value: 0, name: '标的车损险赔款' },
        { value: 0, name: '三者车物赔款' },
        { value: 0, name: '三者人伤赔款' },
        { value: 0, name: '其他赔款' },

    ]
}) => {
    const ref = useRef();


    const setEchart = ({
        event, state
    }) => {

        var myChart = echarts.init(event, 'dark');
        var option;
        myChart.clear();
        option = {
            legend: {
                top: 'bottom',
                show: false
            },
            color: ['#0090e8', '#00a0e8', '#00d1e8', '#00bbe8'],
            backgroundColor: 'rgba(0,0,0,0)',
            toolbox: {
                show: false,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: '有效报案赔款金额统计',
                    type: 'pie',
                    // radius: [50, 250],
                    center: ['50%', '50%'],
                    radius: ['20%', '70%'],
                    roseType: 'area',
                    label: {//线标签
                        show: true,
                        formatter(param) {

                            // percent 是百分比;color是颜色;value是值；name 是name值；
                            return param.name + ' (' + param.percent + '%)';
                        }
                    },
                    itemStyle: {
                        borderRadius: 0
                    },
                    data: state
                }
            ],
        };

        option && myChart.setOption(option);


    }




    useEffect(() => {

        setTimeout(() => {
            setEchart({
                state,
                event: ref.current
            })
        }, 500)
    }, [ref, state])
    return (
        <>
            <div className={styels.box}>
                <div className="echart" ref={ref}></div>
            </div>
        </>
    )
}
export default EchartModel;